<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/8/20
  Time: 9:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>echarts</title>
    <%--    引入--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/js/echarts.min.js" type="text/javascript"></script>
    <%--    <script src="${pageContext.request.contextPath}/static/js/myJS.js" type="text/javascript"></script>--%>
</head>
<body>
<%--初始化容器--%>
<%--    图1所在空间--%>
<div id="pie" style="width: 450px;height:450px; margin-right: 30px;float: left"></div>
<%--图2所在空间--%>
<div id="pie2" style="width:450px;height:450px;float: left"></div>
<script>

    $(document).ready(function echart01() {
        //初始化容器
        var pie = echarts.init(document.getElementById("pie"))
        //样式
        //发送ajax请求
        $.ajax({
            url: '${pageContext.request.contextPath}/echarts/pie',
            dataType: 'json',
            type: 'post',
            success: function (rs) {
                console.log(rs);
                option = {
                    xAxis: {
                        type: 'category',
                        data: rs.obj.integerList1
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: rs.obj.integerList2,
                            type: 'bar'
                        }

                    ]

                };
                //让图形展示在对应的位置
                pie.setOption(option);
            }
        })

    })
    $(document).ready(function echart02() {
        //初始化容器
        var pie2 = echarts.init(document.getElementById("pie2"))
        //样式
        //发送ajax请求
        $.ajax({
            url: '${pageContext.request.contextPath}/echarts/pie2',
            dataType: 'json',
            type: 'post',
            success: function (rs) {
                console.log(rs);
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: rs
                        }
                    ]
                };
                //让图形展示在对应的位置
                pie2.setOption(option);
            }
        })

    })


</script>
</body>
</html>
